﻿ @using Entity;
@model Config_File_Second_Kind;
<!DOCTYPE html>
<html lang="zh-CN">

<head>


    <script src="~/lib/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
    <script src="//unpkg.com/element-plus"></script>

    <style>


        .form-button {
            text-align: right;
            margin: 10px 0;
        }

        .bordered-table {
            width: 70%;
            border-collapse: collapse;
        }

            .bordered-table input {
                width: 500px; /* 固定宽度 */
                padding: 6px; /* 可选：调整内边距让输入框更美观 */
            }

            .bordered-table th,
            .bordered-table td {
                border: 1px solid #ccc;
                padding: 8px;
            }

            .bordered-table th {
                background-color: #f7d08b;
                text-align: right;
                width: 200px;
                font-weight: normal;
            }


        body {
            background-color: #FFFFCC; /* 示例浅灰色，可替换为你的图片主色值 */
        }
    </style>
</head>

<body>

    <div id="app">

        <form asp-action="AddCFSK">

            <span>您正在做的业务是：人力资源--客户化设置--人力资源档案管理设置--II级机构设置--II级机构添加</span>
            <div class="form-button">
                <input type="submit" value="提交" />
                <a asp-controller="EJJGSZ" asp-action="Index">返回</a>
            </div>

            <table class="bordered-table">
                <tr>
                    <th>I级机构名称</th>
                    <td>

                        <el-cascader v-model="selectedOrg"
                                     :options="orgOptions"
                                     :props="cascaderProps"
                                     placeholder="请选择I级机构"
                                     clearable
                                     v-on:change="handleOrgChange"
                                     class="w-full">
                        </el-cascader>
                        <!-- 添加隐藏字段用于表单提交 -->
                        <input type="hidden" name="first_kind_id" :value="selectedOrg[0]">
                        <input type="hidden" name="first_kind_name" :value="firstKindName">


                    </td>
                </tr>
                <tr>
                    <th>II级机构编号</th>
                    <td>  <input asp-for="@Model.second_kind_id" /></td>
                </tr>
                <tr>
                    <th>II级机构名称</th>
                    <td>  <input asp-for="@Model.second_kind_name" /></td>
                </tr>
                <tr>
                    <th>薪酬发放责任人编号（多个编号之间请用"半角逗号"加"一个空格"隔开，如", "）</th>
                    <td><input asp-for="@Model.second_salary_id" /></td>
                </tr>
                <tr>
                    <th>销售责任人编号（多个编号之间请用"半角逗号"加"一个空格"隔开，如", "）</th>
                    <td><input asp-for="@Model.second_sale_id" /></td>
                </tr>
            </table>

        </form>

    </div>

   

    <script type="text/javascript">

        const { createApp, ref, onMounted } = Vue;
        const app = createApp({
           setup(){
           
              // 机构选择相关
                const selectedOrg = ref([]);  // 选中的机构ID数组
                const orgOptions = ref([]);   // 级联选择器的选项数据
                const firstKindName = ref('');  // I级机构名称

                // 级联选择器配置
                const cascaderProps = ref({
                    expandTrigger: 'click',
                    value: 'id',
                    label: 'name',
                    children: 'children',
                    checkStrictly: true
                });

                // 获取机构数据
                const fetchOrgData = async () => {
                    try {
                        const response = await axios.get('/GetFirstLevelOrgData');
                        orgOptions.value = response.data;
                    } catch (error) {
                        console.error('获取机构数据失败:', error);
                        ElMessage.error('获取机构数据失败，请重试');
                    }
                };

                // 处理级联选择变化
                const handleOrgChange = (value) => {
                    console.log('选中的机构ID:', value);
                    const firstId = value[0];
                    if (firstId) {
                        // 从级联数据中获取I级名称
                        const firstItem = orgOptions.value.find(item => item.id === firstId);
                        firstKindName.value = firstItem?.name || ''; // 更新名称
                    } else {
                        firstKindName.value = ''; // 清空名称
                    }
                };

                // 页面加载时初始化
                onMounted(() => {
                    fetchOrgData();
                });

                return {
                    selectedOrg,
                    orgOptions,
                    cascaderProps,
                    handleOrgChange,
                    firstKindName
                };


           
           }
        })
          app.use(ElementPlus).mount('#app');




    </script>


</body>

</html>
